<template>
	<view class="content">
		<view class="new-head">
			<AllHeads name="设置" :type="type"></AllHeads>
		</view>
		<view class="ours-nav">
			<view class="nav-item">
				<text class="oli-Utext">头像 </text>
				<!-- #ifdef APP-PLUS -->
				<view class="oli-box" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')">
					<image class="oli-image" :src="Info.avatar" mode=""></image>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<!-- #endif  -->

				<!-- #ifndef APP-PLUS -->
				<view class="oli-box" @click="changeAvatarUrl">
					<image class="oli-image" :src="Info.avatar" mode=""></image>
					<uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<!-- #endif  -->
			</view>
			<view class="nav-item">
				<text class="oli-Utext">昵称 </text>
				<view class="oli-word" @click="onShowOpen">
					<text class="word-Ltext">{{ Info.nickName }}</text>
					<!-- <text class="word-Atext">></text> -->
					<uni-icons type="arrowright" class="word-Atext" size="15"></uni-icons>
				</view>
			</view>


			<view class="nav-item" @click="onCancelAccount">
				<text class="oli-Utext">注销账号</text>
				<uni-icons type="arrowright" size="15"></uni-icons>
			</view>
		</view>

		<view class="user-last">
			<text class="last-Btext" @click="onOut">退出登录</text>
		</view>

		<!-- 修改用户名 -->
		<uni-popup ref="Dialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="新名称" v-model="vlaue" placeholder="请输入您的新名称"
				@confirm="onDetailName"></uni-popup-dialog>
		</uni-popup>

		<permission-popup ref="authpup" type="top" :isNativeHead="false" @changeAuth="changeAuth"
			:permissionID="permissionID"></permission-popup>
	</view>
</template>

<script>
	import permissionPopup from "@/components/permission-popup/permission-popup";
	import {
		setCustomer,
	} from '@/api/apis';

	setCustomer
	import {
		BASE_URL
	} from "@/api/url.js"
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		components: {
			permissionPopup
		},
		data() {
			return {
				type: 'arrow-left',
				Uname: [],
				avatarUrl: '../../static/default-avatar.png',
				avatar: '',
				vlaue: "",
				permissionID: "",
				userinfo: uni.getStorageSync('Info') || []
			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId', 'storeForm']),
		},
		methods: {
			...mapMutations("userInfo", ['setRemove', 'setUserInfo']),
			gochange() {
				// uni.navigateTo({
				// 	url: '/pages/changeUsername/changeUsername?info=' + this.Uname.username
				// })
			},
			changeAvatarUrl() {
				let that = this
				uni.chooseImage({
					count: 1, // 默认9  
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
					permissionID: '',
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
						console.log(res);
						const tempFilePaths = res.tempFilePaths;
						// 这里可以添加将图片上传到服务器的代码（如果需要的话）
						uni.uploadFile({
							url: BASE_URL +
								'/jeecg-store/store/upload/file/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'x-access-token:': uni.getStorageSync('token') || ''
							},
							header: {
								'x-access-token': uni.getStorageSync('token') || ''
							},
							success: (res1) => {
								let params = {
									id: that.Info.id,
									avatar: JSON.parse(res1.data).result
								}
								setCustomer(params).then(res => {
									if (res.success) {
										let INFO = {
											...that.Info
										}
										INFO.avatar = JSON.parse(res1.data)
											.result // 更新头像路径
										that.setUserInfo(INFO);
									}

								})
							}
						});
					}
				});
			},

			// 修改内容
			onDetailName(e) {
				// let INFO = {
				// 	...this.Info
				// }
				// INFO.nickName = e
				let params = {
					id: this.Info.id,
					nickName: e
				}
				setCustomer(params).then(res => {
					if (res.success) {
						let INFO = {
							...this.Info
						}
						INFO.nickName = e // 更新头像路径
						this.setUserInfo(INFO);
					}

				})
			},

			// 打开弹窗
			onShowOpen() {
				this.vlaue = this.Info.nickName
				this.$refs.Dialog.open()
			},

			//打开自定义权限目的弹框
			openAuth(permissionID) {
				if (plus.os.name == 'Android') {
					this.permissionID =
					permissionID; //这个是对应的权限 ACCESS_FINE_LOCATION 位置权限 / WRITE_EXTERNAL_STORAGE 存储空间/照片权限 / CAMERA相机权限 / CALL_PHONE 拨打电话
					setTimeout(() => {
						this.$refs['authpup'].open();
					}, 500)
				} else {
					this.changeAvatarUrl()
				}
			},

			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				this.changeAvatarUrl()
			},

			//注销用户
			onCancelAccount() {
				uni.navigateTo({
					url: "/pages/CancelAccount/CancelAccount"
				})
			},


			onOut() {
				uni.showModal({
					title: '提示：',
					content: '请确认是否要退出登录？',
					cancelColor: "#aaaaaa",
					confirmColor: "#FE2C55",
					success: (res) => {
						if (res.confirm) {
							console.log('确定，退出登录');
							this.setRemove() //清空缓存信息
							uni.switchTab({
								url: '/pages/index/index'
							})

						} else if (res.cancel) {
							// console.log('取消');
							//TODO
							return
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding: 25rpx;

		.new-head {
			width: 100%;
			padding: 50rpx 0 30rpx 0;
		}

		.ours-nav {
			background-color: #fff;
			// padding: 24rpx;

			.nav-item {
				border-bottom: 2rpx dashed #ccc;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// padding: 0 24rpx;

				.oli-Utext {
					padding: 24rpx 0 24rpx 0;
					color: #717171;
					font-size: 27rpx;
				}

				.oli-box {
					display: flex;
					align-items: center;
					padding: -10rpx 0;

					.oli-image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						// background-color: #a4adb3;
						margin: 10rpx 0;
						margin-right: 20rpx;
					}
				}

				.oli-word {
					.word-Ltext {
						color: #717171;
						font-size: 27rpx;
					}

					.word-Atext {
						margin-left: 20rpx;
					}
				}
			}
		}
	}

	.user-last {
		margin-top: 60rpx;

		.last-Btext {
			text-align: center;
			display: block;
			color: #f34129;
			font-size: 30rpx;
			// font-weight: 550;
		}
	}
</style>